<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script src="./js/data.js"></script>
  <script src="./js/plugins.js"></script>
  <script>
    let list = document.querySelector('#list')
    let checkAll = document.querySelector('#checkAll')
    let remove = document.querySelector('#remove')
    let newInfo = document.querySelector('#newInfo')
    let add = document.querySelector('#add')
    // 首次渲染
    domRender()

    // 给全选全不选添加点击事件
    checkAll.onclick = function (e) {
      data.forEach(item => item.checked = e.target.checked)
      domRender()
    }

    // 点击按钮删除所有已选项
    remove.onclick = function () {
      data = data.filter(item => item.checked === false)
      domRender()
    }

    // 点击添加按钮添加歌曲
    add.onclick = function (e) {
      if (!newInfo.value.trim()) return
      data.push({
        id: data.length,
        title: newInfo.value,
        checked: false,
        collect: false
      })
      newInfo.value = ''
      domRender()
    }

    // 回车添加歌曲
    newInfo.onkeyup = function (e) {
      if (e.keyCode === 13) {
        if (!e.target.value.trim()) return
        data.push({
          id: data.length,
          title: newInfo.value,
          checked: false,
          collect: false
        })
        newInfo.value = ''
        domRender()
      }
    }
    
  </script>
</body>

</html>